<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <title>欢迎来到黑仔炸炸</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/common.css" type="text/css"/>
</head>
<body>
{volist name="products" id="product"}
<img src="{$product.img_url?$product.img_url:''}" class="img"/>
<span>{$product.name}<span><span>原价{$product.price}<span>
        <a href="{:url('index/product/index',['product_id'=>$product.id])}">立即查看</a>
{/volist}
</body>
</html>
<script>
    $('.close-mask').click(function () {
        $(this).parents('.mask').css('visibility', 'hidden');
    })


</script>
<style>
    .img{
        width: 10em;
        height: 10em;
    }
    .mask {
        width: 80%;
        height: 80%;
        background-color: #000;
        opacity: 0.6;
        position: fixed;
    }

    .close-mask {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 16px;
        font-size: 18px;
        position: absolute;
        top: -8px;
        right: -8px;
    }

    .mask-content {
        text-align: center;
        color: white;
    }

    .piece-img {
        margin: auto;
        width: 200px;
        height: 200px;
    }
</style>